<template>
  <div class="h-full flex">
    <my-sider :sider="sider"/>

    <div class="mt-3">
      <div class="user_search grid grid-cols-4">
        <div><Input v-model="eid" class="w-2/3" placeholder="请输入工号" style="width: 100px;"></Input></div>
        <div><Input v-model="ename" class="w-2/3" placeholder="请输入姓名" style="width: 100px;"></Input></div>
        <div><Input v-model="edept" class="w-2/3" placeholder="请输入部门" style="width: 100px;"></Input></div>
        <div>
          <Button @click="SearchByUserId" type="primary">搜索</Button>
          <Button @click="()=>{this.addModal=true}" type="info" class="ml-3">新增</Button>
        </div>
      </div>
      <my-table style="overflow-y: scroll;max-height: 75vh" v-if="listData" :list-columns="listColumns"
                :list-data="listData" class="mt-3 "/>
    </div>
    <Modal
        v-model="show"
        title="员工信息"
        @on-ok="()=>{show=false}">
      <div v-if="showData" class="space-y-3">
        <div class="p-3 bg-white shadow rounded-lg">
          <h3 class="text-xs border-b">姓名</h3>
          <p class="font-sans">
            {{ showData.name }}
          </p>
        </div>
        <div class="p-3 bg-white shadow rounded-lg">
          <h3 class="text-xs border-b">出生日期</h3>
          <p class="font-sans">
            {{ showData.birth }}
          </p>
        </div>
        <div class="p-3 bg-white shadow rounded-lg">
          <h3 class="text-xs border-b">电话</h3>
          <p class="font-sans">
            {{ showData.tel }}
          </p>
        </div>
        <div class="p-3 bg-white shadow rounded-lg">
          <h3 class="text-xs border-b">qq</h3>
          <p class="font-sans">
            {{ showData.qq }}
          </p>
        </div>
        <div class="p-3 bg-white shadow rounded-lg">
          <h3 class="text-xs border-b">地址</h3>
          <p class="font-sans">
            {{ showData.address }}
          </p>
        </div>
        <div class="p-3 bg-white shadow rounded-lg">
          <h3 class="text-xs border-b">email</h3>
          <p class="font-sans">
            {{ showData.email }}
          </p>
        </div>
        <div class="p-3 bg-white shadow rounded-lg">
          <h3 class="text-xs border-b">性别</h3>
          <p class="font-sans">
            {{ showData.gender }}
          </p>
        </div>
        <div class="p-3 bg-white shadow rounded-lg">
          <h3 class="text-xs border-b">学历</h3>
          <p class="font-sans">
            {{ showData.education }}
          </p>
        </div>
        <div class="p-3 bg-white shadow rounded-lg">
          <h3 class="text-xs border-b">民族</h3>
          <p class="font-sans">
            {{ showData.nation }}
          </p>
        </div>
        <div class="p-3 bg-white shadow rounded-lg">
          <h3 class="text-xs border-b">项目数量</h3>
          <p class="font-sans">
            {{ showData.number }}
          </p>
        </div>
        <div class="p-3 bg-white shadow rounded-lg">
          <h3 class="text-xs border-b">部门</h3>
          <p class="font-sans">
            {{ deptList[showData.deptId] }}
          </p>
        </div>
      </div>
    </Modal>
    <Modal
        v-model="updateShow"
        title="员工信息修改"
        @on-ok="confirmUpdate"
        @on-cancel="()=>{updateShow=false}">
      <div v-if="showData" class="space-y-3">
        <div class="p-3 bg-white shadow rounded-lg">
          <h3 class="text-xs border-b">姓名</h3>
          <p class="font-sans">
            <Input v-model="showData.name"/>
          </p>
        </div>
        <div class="p-3 bg-white shadow rounded-lg">
          <h3 class="text-xs border-b">出生日期</h3>
          <p class="font-sans">
            <DatePicker type="date" v-model="showData.birth" placeholder="Select date"
                        style="width: 300px"></DatePicker>
          </p>
        </div>
        <div class="p-3 bg-white shadow rounded-lg">
          <h3 class="text-xs border-b">电话</h3>
          <p class="font-sans">
            <Input v-model="showData.tel"/>
          </p>
        </div>
        <div class="p-3 bg-white shadow rounded-lg">
          <h3 class="text-xs border-b">qq</h3>
          <p class="font-sans">
            <Input v-model="showData.qq"/>
          </p>
        </div>
        <div class="p-3 bg-white shadow rounded-lg">
          <h3 class="text-xs border-b">email</h3>
          <p class="font-sans">
            <Input v-model="showData.email"/>
          </p>
        </div>
        <div class="p-3 bg-white shadow rounded-lg">
          <h3 class="text-xs border-b">性别</h3>
          <p class="font-sans">
            <Input v-model="showData.gender"/>
          </p>
        </div>
        <div class="p-3 bg-white shadow rounded-lg">
          <h3 class="text-xs border-b">地址</h3>
          <p class="font-sans">
            <Input v-model="showData.address"/>
          </p>
        </div>
        <div class="p-3 bg-white shadow rounded-lg">
          <h3 class="text-xs border-b">密码</h3>
          <p class="font-sans">
            <Input type="password" v-model="showData.password"/>
          </p>
        </div>
        <div class="p-3 bg-white shadow rounded-lg">
          <h3 class="text-xs border-b">学历</h3>
          <p class="font-sans">
            <Input v-model="showData.education"/>
          </p>
        </div>
        <div class="p-3 bg-white shadow rounded-lg">
          <h3 class="text-xs border-b">民族</h3>
          <p class="font-sans">
            <Input v-model="showData.nation"/>
          </p>
        </div>
        <div class="p-3 bg-white shadow rounded-lg">
          <h3 class="text-xs border-b">部门</h3>
          <p class="font-sans">
            <Select v-model="showData.deptId" style="width:200px">
              <Option v-for="item in Object.keys(deptList)" :value="item" :key="item+2343">{{ deptList[item] }}</Option>
            </Select>
          </p>
        </div>

      </div>
    </Modal>

    <Modal
        title="删除确认"
        v-model="deleteShow"
        @on-cancel="()=>{deleteShow=false}"
        @on-ok="confirmDelete"
    >
      <p class="text-2xl">确认删除</p>
    </Modal>

    <Modal v-model="addModal"
            title="添加员工"
            @on-ok="addEmployee"
            @on-cancel="()=>{addModal=false}">
      <div  class="space-y-3">
        <div v-for="(item,idx) in Object.keys(newData)" :key="idx">
          <div  class="p-3 bg-white shadow rounded-lg">
            <h3 class="text-xs border-b">
              {{ newData[item].name }}
            </h3>
            <p class="font-sans">
            <Input v-if="item!=='birth'" v-model="newData[item].value"></Input>
              <DatePicker v-else v-model="newData[item].value" />
            </p>
          </div>
        </div>
      </div>

    </Modal>
  </div>
</template>
<script>
import MyTable from "@/components/Mytable.vue";
import MySider from "@/components/Mysider.vue";
import {deleteOne, getAll, getUser, updateOne} from "../../api/employee/employee"
import {getAll as getAllDept} from "../../api/agent/agent"
import {api} from "@/boot/axios";
import dayjs from "dayjs";

export default {
  name: 'userManagement',
  components: {
    MySider,
    MyTable,
  },
  data() {
    return {
      addModal:false,
      sider: [
        {name: '员工', pathName: 'user', order: '1-1'}
      ],
      eid: '',
      newData:{
        name:{
          name:'姓名',
          value:''
        },
        birth:{
          name:'出生日期',
          value:''
        },
        dept_id:{
          name:'部门',
          value:''
        },
        tel:{
          name:'电话',
          value:''
        },
        qq:{
          name:'qq',
          value:''
        },
        email:{
          name:'email',
          value:''
        },
        gender:{
          name:'性别',
          value:''
        },
        password:{
          name:'密码',
          value:''
        },
        education:{
          name:'学历',
          value:''
        },
        address:{
          name:'地址',
          value:''
        },
        nation:{
          name:'民族',
          value:''
        },
        user_id:{
          name:'工号',
          value:''
        }

      },
      edept: '',
      ename: '',
      updateShow: false,
      deleteShow: false,
      deptList: {},
      show: false,
      showData: null,
      listData: [],
      copyListData: [],
      listColumns: [
        {title: '工号', key: 'user_id'},
        {title: '姓名', key: 'name'},
        {title: '手机号', key: 'tel'},
        {title: '年龄', key: 'age'},
        {title: '地址', key: 'address'},
        {title: '性别', key: 'gender'},
        {
          title: '操作', key: 'user_id',
          render: (h, param) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'

                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.Check(param)
                  }
                }
              }, '查看'),
              h('Button', {
                props: {
                  type: 'success',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.checkUpdate(param)
                  }
                }
              }, '修改'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.checkDelete(param)
                  }
                }
              }, '删除')
            ])
          }
        },
      ]
    }
  },
  created() {
    getAll().then(res => {
      let data = res.data
      if (data.code == 200) {
        this.listData = data.data
        this.copyListData = data.data.slice(0, data.data.length)
        this.listData.forEach(item => {
          //从birth中计算年龄
          let birth = item.birth
          let year = birth.substring(0, 4)
          let now = new Date()
          let nowYear = now.getFullYear()
          let age = nowYear - year
          item.age = age + 1
        })
      }
    }).then(() => {
    })
    getAllDept().then(res => {
      let data = res.data
      if (data.code === 200) {
        let res = data.data
        for (let i = 0; i < res.length; i++) {
          this.deptList[res[i].dept_id] = res[i].name
        }
      }
    })
  },
  methods: {
    addEmployee: function () {
      let formDate = new FormData()
      for(let key of Object.keys(this.newData)){
        if(key==='birth'){
          this.newData[key].value=dayjs(this.newData[key].value).format('YYYY-MM-DD')
        }
        formDate.append(key,this.newData[key].value)
      }
      this.addModal=true
      api.post('/employee/add',formDate).then(res=>{
        if(res.data.code===200){
          this.$Message.success('添加成功')
          this.addModal=false
          this.$router.go(0)
          this.newData =     {
            name:{
              name:'姓名',
                  value:''
            },
            birth:{
              name:'出生日期',
                  value:''
            },
            dept_id:{
              name:'部门',
                  value:''
            },
            tel:{
              name:'电话',
                  value:''
            },
            qq:{
              name:'qq',
                  value:''
            },
            email:{
              name:'email',
                  value:''
            },
            gender:{
              name:'性别',
                  value:''
            },
            password:{
              name:'密码',
                  value:''
            },
            education:{
              name:'学历',
                  value:''
            },
            address:{
              name:'地址',
                  value:''
            },
            nation:{
              name:'民族',
                  value:''
            },
            user_id:{
              name:'工号',
                  value:''
            }


          }}else{
          this.$Message.error('添加失败')
          this.addModal=false
        }
      })
    },
    Check: function (param) {
      let data = this.listData.filter(item => {
        return item.user_id === param.row.user_id
      })
      getUser(param.row.user_id).then(res => {
        let response = res.data.data
        console.log(response)
        this.showData = data[0]
        this.showData.number = response.length
        this.show = true
      })
    },
    checkUpdate: function (param) {
      let data = this.listData.filter(item => {
        return item.user_id === param.row.user_id
      })
      this.showData = data[0]
      this.updateShow = true
    },
    checkDelete: function (param) {
      let data = this.listData.filter(item => {
        return item.user_id === param.row.user_id
      })
      this.showData = data[0]
      this.deleteShow = true
    },
    confirmUpdate: function () {
      let formData = new FormData()
      formData.append('user_id', this.showData.user_id)
      formData.append('name', this.showData.name)
      formData.append('tel', this.showData.tel)
      formData.append('dept_id', this.showData.deptId)
      formData.append('qq', this.showData.qq)
      formData.append('email', this.showData.email)
      formData.append('gender', this.showData.gender)
      formData.append('address', this.showData.address)
      formData.append('password', this.showData.password)
      formData.append('education', this.showData.education)
      formData.append('nation', this.showData.nation)
      // convert birth to date
      // let date = Date.parse(this.showData.birth)
      // formData.append('birth', date)
      updateOne(formData).then(res => {
        let data = res.data
        if (data.code === 200) {
          this.$Message.success('修改成功')
        } else {
          this.$Message.error('修改失败')
        }
      })
    },
    confirmDelete: function () {
      let formData = new FormData()
      formData.append('user_id', +this.showData.user_id)
      deleteOne(formData).then(res => {
        let data = res.data
        if (data.code === 200) {
          this.$Message.success('删除成功')
          // TODO: 删除得时候 外键级联
          this.listData = this.listData.filter(item => {
            return item.user_id !== this.showData.user_id
          })
        } else {
          this.$Message.error('删除失败')
        }
      })
    },
    SearchByUserId: function () {
      console.log(this.eid, this.ename, this.edept)
      console.log(1)
      if ( this.eid !== '') {
        let tmp = this.listData.filter(item => {
          return +item.user_id === +this.eid
        })
        this.listData = tmp

      }
      if (this.ename !== '') {
        let tmp = this.listData.filter(item => {
          return item.name.indexOf(this.ename) !== -1
        })
        this.listData = tmp

      }
      if ( this.edept !== '') {
        let tmp = this.listData.filter(item => {
          return this.deptList[item.dept_id].indexOf(this.edept) !== -1
        })
        this.listData = tmp

      }
      if (this.eid === '' && this.ename === '' && this.edept === '') {
        getAll().then(res => {
          let data = res.data
          if (data.code == 200) {
            this.listData = data.data
            this.copyListData = data.data.slice(0, data.data.length)
            this.listData.forEach(item => {
              //从birth中计算年龄
              let birth = item.birth
              let year = birth.substring(0, 4)
              let now = new Date()
              let nowYear = now.getFullYear()
              let age = nowYear - year
              item.age = age + 1
            })
          }
        }).then(() => {
        })
      }


    },
  }

}
</script>
<style scoped></style>